// =============================================
// @des:            zless
// @author:         jts
// @time:           2017-05-13
// @lastTime
// @version          1.0
// =============================================

// common reset
.reset(){
  *{margin:0; padding:0;}
  li{list-style:none;}
  img{border:none;}
  input,select,textarea{outline:none; border:none; background:none;}

  a{text-decoration:none;}


  body,
  ul,
  ol,
  li,
  dl,
  dd,
  dt,
  p,
  th,
  td,
  h1,
  h2,
  h3,
  h4,
  h5 {
    padding: 0;
    margin: 0;
  }

  body {
    font-family: PingFang SC, Lantinghei SC, Helvetica Neue, Helvetica, Arial, Microsoft YaHei, '\\5FAE软雅黑', STHeitiSC-Light, simsun, '\\5B8B体', WenQuanYi Zen Hei, WenQuanYi Micro Hei, "sans-serif";
    font-size: 14px;
    background-color:@body_bg;
    line-height: 24px;
    color: @color-default;
  }

  ol,
  ul {
    list-style: none
  }

  a {
    text-decoration: none;
    color: #3d3e83;
  }

  img {
    border: 0;
    vertical-align: middle;
  }
  textarea{resize:none;}
  input {
    outline: none;
  }

  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    .font14();
  }

  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    .font14();
  }

  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    .font14();
  }

  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    .font14();
  }

}
// common theme
.theme(){
  .input-border-color(@border-color: #9595A9) {
    border: 1px solid @border-color;
    &:focus{
      border-color: @color-red;
    }
  }
  //display
  .block{
    display: block;
  }
  .hidden{
    display: none;
  }

  .bg-white {
    background: @color-white;
  }
  .container {
    width: @container-width;
    margin: 0 auto;
    .clearfix();
  }
  .container.bg-none{ background:none;}
  .color-black{ color:@color-default;}
  .color-red{ color:@color-red;}
  .color-white{ color:@color-white;}
  .color-green{color:@color-green;}
  .color-yellow{color:@color-yellow;}
  .color-gray{ color:@color-gray;}
  .color-blue{ color:@color-blue;}
  //text
  .text-right{text-align:right;}
  .text-center{text-align:center;}
  .text-left{text-align:left;}
  .text-indent{ text-indent:2em;}
  .text-underline{text-decoration:underline}
  //栅格布局
  .row {
    width: 100%;
    .clearfix();
  }
  .col-90,
  .col-85,
  .col-80,
  .col-75,
  .col-70,
  .col-66,
  .col-65,
  .col-60,
  .col-55,
  .col-50,
  .col-45,
  .col-40,
  .col-35,
  .col-33,
  .col-30,
  .col-25,
  .col-20,
  .col-15,
  .col-10,
  .col-5 {
    float: left;
  }

  .col-90 {
    width: 90%;
  }

  .col-85 {
    width: 85%;
  }

  .col-80 {
    width: 80%;
  }

  .col-75 {
    width: 75%;
  }

  .col-70 {
    width: 70%;
  }

  .col-65 {
    width: 65%;
  }

  .col-66 {
    width: 66.66666666666666%;
  }

  .col-60 {
    width: 60%;
  }

  .col-55 {
    width: 55%;
  }

  .col-50 {
    width: 50%;
  }

  .col-45 {
    width: 45%;
  }

  .col-40 {
    width: 40%;
  }

  .col-35 {
    width: 35%;
  }

  .col-33 {
    width: 33.333333333333336%;
  }

  .col-30 {
    width: 30%;
  }

  .col-25 {
    width: 25%;
  }

  .col-20 {
    width: 20%;
  }

  .col-15 {
    width: 15%;
  }

  .col-10 {
    width: 10%;
  }

  .col-5 {
    width: 5%;
  }
  //警告框
  .alert_info {
    @h: 40px;
    .txt-ver(@h);
    .text-center;
    background: #FEEDEA;
    color: #F55131;
  }
  .btn {
    .border-radius();
    .text-center;
    display: inline-block;
    //border: 1px solid @color-red;
  }
  .btn-default {
    background: @bg-red;
    cursor: pointer;
    width: 100%;
    .color-white;
    &:hover {
      background: @bg-red-hover;
    }
  }
  .btn-default.btn-solid {
    background: none;
    color: @color-red;
    border: 1px solid @color-red;
  }
  //浮动
  .pull-left {
    float: left;
  }

  .pull-right {
    float: right;
  }
  //内边距
  .pad-5 {
    padding: 5px;
  }

  .pad-10 {
    padding: 10px;
  }

  .pad-15 {
    padding: 15px;
  }

  .pad-right-10 {
    padding-right: 10px;
  }

  .pad-top-5 {
    padding-top: 5px;
  }

  .pad-top-10 {
    padding-top: 10px;
  }

  .pad-top-15 {
    padding-top: 15px;
  }

  .pad-top-25 {
    padding-top: 25px;
  }

  .pad-top-30 {
    padding-top: 30px;
  }

  .pad-top-40 {
    padding-top: 40px;
  }

  .pad-left-10 {
    padding-left: 10px;
  }

  .pad-bottom-10 {
    padding-bottom: 10px;
  }

  .pad-bottom-15 {
    padding-bottom: 15px;
  }

  .pad-bottom-25 {
    padding-bottom: 25px;
  }

  .pad-bottom-30 {
    padding-bottom: 30px;
  }

  .pad-bottom-40 {
    padding-bottom: 40px;
  }

  .mar-top-20 {
    margin-top: 20px;
  }

  .mar-top-40 {
    margin-top: 40px;
  }
  //
  .form-group {
    margin-bottom: 15px;
    .pos(r);
    .input_group_addon {
      .pos(a);
      right: 8px;
      top: 8px;
    }
  }

  .form-control {
    .font13;
    @h: 42px;
    padding: 0;
    .txt-ver(@h);
    width: 100%;
    text-indent: 15px;
    background: #fff;
  }

  input.form-control {
    .input-border-color();
    .border-radius();
  }

  .form-error {
    .font14;
    display: none;
    color: @color-red;
    white-space: nowrap;
  }

  //图标
  .ico {
    background: url("../images/sprites.png") no-repeat;
    display: inline-block;
  }

  .ico_success,
  .ico_fail,
  .ico_wait {
    @w: 81px;
    width: @w;
    height: @w;
  }

  .ico_fail {
    background-position: ~' 0 -93px';
  }

  .ico_wait {
    background-position: ~' 0 -188px';
  }
  //面包屑导航
  .breadcrumb {
    @h: 62px;
    .txt-ver(@h);
    color: @color-gray;
    ol {
      display: inline-block;
    }
    li {
      display: inline;
    }
    a {
      color: @color-gray;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .breadcrumb ol > li + li:before {
    padding: 0 5px;
    content: ">";
    font-family: "SimSun";
  }
  //标签
  .label {
    .border-radius();
    line-height: 24px;
    padding: 2px 6px;
    margin-left: 9px;
    position: relative;
    top: -5px;
    white-space: nowrap;
  }
  .label-default {
    color: @color-gray;
    border: 1px solid @color-gray;
  }
  //进度条
  .progress(@h: 4px) {
    height: @h;
    background: #e8ecf7;
    .progress_bar {
      float: left;
      width: 0;
      height: @h;
      position: relative;
      background: @bg-red;
      background: -webkit-linear-gradient(left, #ffc600, #ff3d1a);
      /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, #ffc600, #ff3d1a);
      /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right, #ffc600, #ff3d1a);
      /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #ffc600, #ff3d1a);
      /* 标准的语法 */
      background: #ff3d1a \9;
      .ico_tip {
        @w: 38px;
        width: @w;
        height: 26px;
        font-size: 12px;
        line-height: 28px;
        .text-center;
        background-position: -130px -63px;
        .pos(a);
        top: @h;
        right: -@w/2;
      }
    }
  }

  //多选按钮
  .label_checkbox {
    span {
      @w: 20px;
      @h: 20px;
      display: inline-block;
      width: @w;
      height: @h;
      .pos(r);
      top: 6px;
      margin-right: 4px;
      background-position: -210px -26px;
    }
    input {
      .hidden;
      &:checked ~ span {
        top: 4px;
        background-position: -210px 0;
      }
    }
  }

  //表格
  .table {
    @border_color: #f3f3f6;
    width: 100%;
    border-top: 1px solid @border_color;
    border-right: 1px solid @border_color;
    th,
    td {
      border-left: 1px solid @border_color;
      border-bottom: 1px solid @border_color;
      padding: 10px 0;
      border-collapse: collapse;
    }
    th {
      background: @border_color;
      font-weight: normal;
    }
  }

  //切换
  .dl_tab {
    dt {
      @h: 42px;
      .txt-ver(@h);
      border-bottom: 2px solid #f3f3f6;
      color: @color-gray;
      a {
        display: inline-block;
        .txt-ver(@h);
        color: @color-gray;
        padding: 0 8px;
        margin-right: 30px;
        &.active {
          border-bottom: 2px solid @color-red;
        }
      }
    }
    dd {
      .hidden;
      padding: 60px 50px 60px 50px;
      &.active {
        display: block;
      }
    }
  }

  //display
  .block{
    display: block;
  }
  .hidden{
    display: none;
  }

  .bg-white {
    background: @color-white;
  }
  .container {
    width: @container-width;
    margin: 0 auto;
    .clearfix();
  }
  .container.bg-none{ background:none;}
  .color-black{ color:@color-default;}
  .color-red{ color:@color-red;}
  .color-white{ color:@color-white;}
  .color-green{color:@color-green;}
  .color-yellow{color:@color-yellow;}
  .color-gray{ color:@color-gray;}
  .color-blue{ color:@color-blue;}
  //text
  .text-right{text-align:right;}
  .text-center{text-align:center;}
  .text-left{text-align:left;}
  .text-indent{ text-indent:2em;}
  .text-underline{text-decoration:underline}
  //栅格布局
  .row {
    width: 100%;
    .clearfix();
  }
  .col-90,
  .col-85,
  .col-80,
  .col-75,
  .col-70,
  .col-66,
  .col-65,
  .col-60,
  .col-55,
  .col-50,
  .col-45,
  .col-40,
  .col-35,
  .col-33,
  .col-30,
  .col-25,
  .col-20,
  .col-15,
  .col-10,
  .col-5 {
    float: left;
  }

  .col-90 {
    width: 90%;
  }

  .col-85 {
    width: 85%;
  }

  .col-80 {
    width: 80%;
  }

  .col-75 {
    width: 75%;
  }

  .col-70 {
    width: 70%;
  }

  .col-65 {
    width: 65%;
  }

  .col-66 {
    width: 66.66666666666666%;
  }

  .col-60 {
    width: 60%;
  }

  .col-55 {
    width: 55%;
  }

  .col-50 {
    width: 50%;
  }

  .col-45 {
    width: 45%;
  }

  .col-40 {
    width: 40%;
  }

  .col-35 {
    width: 35%;
  }

  .col-33 {
    width: 33.333333333333336%;
  }

  .col-30 {
    width: 30%;
  }

  .col-25 {
    width: 25%;
  }

  .col-20 {
    width: 20%;
  }

  .col-15 {
    width: 15%;
  }

  .col-10 {
    width: 10%;
  }

  .col-5 {
    width: 5%;
  }
  //警告框
  .alert {
    @h: 40px;
    .txt-ver(@h);
    .text-center;
  }
  .alert_info {
    background: #FEEDEA;
    color: #F55131;
  }
  .btn {
    .border-radius();
    .text-center;
    display: inline-block;
    //border: 1px solid @color-red;
  }
  .btn-default {
    background: @bg-red;
    cursor: pointer;
    width: 100%;
    .color-white;
    &:hover {
      background: @bg-red-hover;
    }
  }
  .btn-default.btn-solid {
    background: none;
    color: @color-red;
  }

  //图标
  .ico {
    background: url("../images/sprites.png") no-repeat;
    display: inline-block;
  }

  .ico_success,
  .ico_fail,
  .ico_wait {
    @w: 81px;
    width: @w;
    height: @w;
  }

  .ico_fail {
    background-position: ~' 0 -93px';
  }

  .ico_wait {
    background-position: ~' 0 -188px';
  }
  //面包屑导航
  .breadcrumb {
    @h: 62px;
    .txt-ver(@h);
    color: @color-gray;
    ol {
      display: inline-block;
    }
    li {
      display: inline;
    }
    a {
      color: @color-gray;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .breadcrumb ol > li + li:before {
    padding: 0 5px;
    content: ">";
    font-family: "SimSun";
  }
  //标签
  .label {
    .border-radius();
    line-height: 24px;
    padding: 2px 6px;
    margin-left: 9px;
    position: relative;
    top: -5px;
  }
  .label-default {
    color: @color-gray;
    border: 1px solid @color-gray;
  }
  //进度条
  .progress(@h: 4px) {
    height: @h;
    background: #e8ecf7;
    .progress_bar {
      float: left;
      width: 0;
      height: @h;
      position: relative;
      background: @bg-red;
      background: -webkit-linear-gradient(left, #ffc600, #ff3d1a);
      /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, #ffc600, #ff3d1a);
      /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right, #ffc600, #ff3d1a);
      /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #ffc600, #ff3d1a);
      /* 标准的语法 */
      background: #ff3d1a \9;
      .ico_tip {
        @w: 38px;
        width: @w;
        height: 26px;
        font-size: 12px;
        line-height: 28px;
        .text-center;
        background-position: -130px -63px;
        .pos(a);
        top: @h;
        right: -@w/2;
      }
    }
  }

  //多选按钮
  .label_checkbox {
    span {
      @w: 20px;
      @h: 20px;
      display: inline-block;
      width: @w;
      height: @h;
      .pos(r);
      top: 6px;
      margin-right: 4px;
      background-position: -210px -26px;
    }
    input {
      .hidden;
      &:checked ~ span {
        top: 4px;
        background-position: -210px 0;
      }
    }
  }

  //表格
  .table {
    @border_color: #f3f3f6;
    width: 100%;
    border-top: 1px solid @border_color;
    border-right: 1px solid @border_color;
    th,
    td {
      border-left: 1px solid @border_color;
      border-bottom: 1px solid @border_color;
      padding: 10px 0;
      border-collapse: collapse;
    }
    th {
      background: @border_color;
      font-weight: normal;
    }
  }

  //切换
  .dl_tab {
    dt {
      @h: 42px;
      .txt-ver(@h);
      border-bottom: 2px solid #f3f3f6;
      color: @color-gray;
      a {
        display: inline-block;
        .txt-ver(@h);
        color: @color-gray;
        padding: 0 8px;
        margin-right: 30px;
        &.active {
          border-bottom: 2px solid @color-red;
        }
      }
    }
    dd {
      .hidden;
      padding: 60px 50px 60px 50px;
      &.active {
        display: block;
      }
    }
  }
  //表单下拉框
  .dl_dropdown {
    @h: 42px;
    .pos(r);
    dt {
      .form-control;
      .input-border-color();
      .border-radius();
      .txt-ver(@h);
      cursor: pointer;
      .fa {
        .pos(a);
        right: 10px;
        top: 12px;
        font-size: 18px;
      }
    }
    dd {
      .pos(a);
      z-index: 6;
      .bg-white;
      .hidden;
      width: 100%;
      .input-border-color();
      .border-radius();
      top: @h;
      height: @h*3;
      overflow-y: auto;
    }
    li {
      @h: 40px;
      .txt-ver(@h);
      border-bottom: 1px solid #F3F3F6;
      padding-left: 15px;
      cursor: pointer;
      color: @color-default;
      &:hover {
        background: #f2f2f2;;
      }
      &:last-child {
        border-bottom: none;
      }
    }
  }

}
//去除a和label的虚线
.remove_dotted(){
  a,label {blr:~'expression(this.onFocus=this.blur())'}
  a,label {outline:none;}
}
//全局定位
.pos (r){
  position: relative;
}
.pos (a){
  position: absolute;
}
.pos (f){
  position: fixed;
}

//定位居中
.pos-box-cc(@w:600px,@h:360px,@pos:absolute){
  width: @w;
  height: @h;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -@w / 2;
  margin-top: -@h / 2;
}
//布局
.bc(){
  margin-left: auto;
  margin-right: auto;
}
.bc-d(@w:500px){
  width: @w;
  .bc();
}
.wh(@w){
  width: @w;
  height: @w;
}
.w-be-h(@w){
  width: @w;
  height: @w;
}
.z-index(@index:1){
  z-index: @index;
}
//高度100%
.h100(){
  height: 100%;
}
//文字垂直居中
.txt-ver(@h){
  height: @h;
  line-height: @h;
}
// 同.txt-ver
.l-h(@h)
{
  height: @h;
  line-height: @h;
}

//font size
.font(@p: 12px){
  font-size: @p;
}
.font12(){font-size: 12px;}
.font13(){font-size: 13px;}
.font14(){font-size: 14px;}
.font15(){font-size: 15px;}
.font16(){font-size: 16px;}
.font17(){font-size: 17px;}
.font18(){font-size: 18px;}
.font19(){font-size: 19px;}
.font20(){font-size: 20px;}
.font21(){font-size: 21px;}
.font22(){font-size: 22px;}
.font23(){font-size: 23px;}
.font24(){font-size: 24px;}
.font25(){font-size: 25px;}
.font26(){font-size: 26px;}
.font27(){font-size: 27px;}
.font28(){font-size: 28px;}
.font29(){font-size: 29px;}
.font30(){font-size: 30px;}
.font31(){font-size: 31px;}
.font32(){font-size: 32px;}
.font33(){font-size: 33px;}
.font34(){font-size: 34px;}
.font35(){font-size: 35px;}
.font36(){font-size: 36px;}
.font37(){font-size: 37px;}
.font38(){font-size: 38px;}
.font39(){font-size: 39px;}
.font40(){font-size: 40px;}
.font41(){font-size: 41px;}
.font42(){font-size: 42px;}
.font43(){font-size: 43px;}
.font44(){font-size: 44px;}
//background
.bg(@url)
{
  background: url(@url) 0 0 repeat;
}
.bg-m(@url,@x:0,@y:0,@repeat:no-repeat)
{
  background: url(@url) @x @y @repeat;
}
.bgi(@url)
{
  background-image: url(@url);
}
.bgp(@x:0,@y:0){
  background-position: @x @y;
}
.bgr-r(){
  background-repeat: repeat;
}
.bgr-x(){
  background-repeat: repeat-x;
}
.bgr-y(){
  background-repeat: repeat-y;
}
.bgr-no(){
  background-repeat: no-repeat;
}
.bga-fix(){
  background-attachment: fixed;
}

//清除浮动
.clearfix(){
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}
.clearfix{
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}
//特殊需求
.min-width(@width){
  min-width: @width;
  _width:@width;
}
.max-width(@width,@id){
  max-width: @width;
  _width:~'expression(document.getElementById("@{id}").offsetHeight>parseInt("@{width}")?"@{width}": "auto")';
  overflow:hidden;
}
.min-height(@height){
  min-height: @height;
  _height:@height;
}
.max-height(@height,@id){
  max-height: @height;
  _height:~'expression(document.getElementById("@{id}").offsetHeight>parseInt("@{height}")?"@{height}": "auto")';
  overflow:hidden;
}

//透明度
.opa(@opacity: 80) {
  opacity: @opacity / 100;
  filter: ~"alpha(opacity=@{opacity})";
}
.rgba(@red, @green, @blue, @alpha:1){
  @filtercolor:`(_f = function(d){ var v = (parseInt(d)|0).toString(16);return v.length<2 ? "0"+v : v;},
                                        '#'+_f(@{alpha}*255) + _f(@{red}) + _f(@{green})+ _f(@{blue}))`;

  background-color: ~'rgba(@{red},@{green},@{blue},@{alpha})';
  -ms-filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{filtercolor}',endColorstr='@{filtercolor}')";
  filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{filtercolor}',endColorstr='@{filtercolor}')";
}

//文字省略号
// @substract单位为%
.ellipsis-basic(){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  .font-fa();
}

.ellipsis(@substract:0) {
  .ellipsis-basic();
  width:100% - @substract;
}


// =============================================
// 创建栅格布局
// 默认950宽 24列 每列30px 间距10px
// html结构
// <div class="vl-grid"> <div class="row"> <div class="span span6"></div> <div class="span span6"></div> <div class="span span6"></div> <div class="span span6"></div> </div> <div class="row"> <div class="span span24"></div> </div> </div>
// =============================================
//栅格化

.makeGrid(@colnum: 24, @colwidth: 30, @margin: 0px){

  //列数
  @gridColumns:             @colnum;
  //每一列宽度
  @gridColumnWidth:         @colwidth;
  //间距
  @gridGutterWidth:         @margin;
  //行宽度 = (列数 * 每一列的宽度 ) + (margin * (列数-1));
  @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

  //每一列的宽度 间距
  .gridX (@gridColumnWidth, @gridGutterWidth) {
    .spanX (@index) when (@index > 0) {
      .span@{index} { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}

    .offsetX (@index) when (@index > 0) {
      .offset@{index} { .offset(@index); }
      .offsetX(@index - 1);
    }
    .offsetX (0) {}

    .offset (@columns) {
      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
    }

    .span (@columns) {
      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
    }

    .row {
      margin-left: @gridGutterWidth * -1;
      .clearfix();
    }

    .span{
      float: left;
      min-height: 1px; // prevent collapsing columns
      //background-color: #ccc; //this is a test - busy
      margin-left: @gridGutterWidth;
    }

    // generate .spanX and .offsetX
    .spanX (@gridColumns);
    .offsetX (@gridColumns);

  }
  .vl-grid{
    .gridX(@gridColumnWidth, @gridGutterWidth);
  }

}